<template>
    <view>
        <view class="movie-top">
            <view class="top-region" @click="getShow">
                <text>{{cityInfo.city}}</text>
                <image :src="$imgUrl+'images/movie-xiala.png'"></image>
            </view>
            <view class="top-tab-list">
                <view class="tab-list-items" @click="gettab(value.type,index)"
                    :class="{'sel-item' : value.type==tanIndex}" v-for="(value,index) in tabLists" :key="index">
                    {{value.text}}
                    <view class="cut-img" v-if="tanIndex==value.type"></view>
                </view>
            </view>
            <!-- <image :src="$imgUrl+'images/movie-serchs.png'" class="sechut"></image> -->
        </view>
        <view class="movie-main" v-if="tanIndex == 1 || tanIndex == 2">
            <view class="movie-list" v-for="(value,index) in dataList" :key="index" @click="getUrl(value)">
                <view class="movie-img">
                    <image :src="value.pic"></image>
                </view>
                <view class="movie-info">
                    <view class="mo-info-top">
                        <view class="tiel">{{value.name}}</view>
                        <!-- <view class="movie-d"><text class="zimu">IMAX</text><text class="shuzi">2D</text></view> -->
                    </view>
                    <view class="rate-item">
                        <!-- <u-rate :count="5" v-model="value.grade" active-color="#FF6E06" :size="30"></u-rate> -->
                        评分<text class="rate-nun">{{value.grade}}</text>分
                    </view>
                    <view class="director">导演：{{value.director}}</view>
                    <view class="to-star">主演：{{value.cast}}</view>
                    <view class="calss-item">
                        <view class="classify-item">{{value.duration}}分钟</view>
                        <view class="time">{{ value.publishDate.slice(0,10) }}上映</view>
                    </view>
                </view>
                <view class="movie-btns" v-if="tanIndex==1">购票</view>
            </view>
        </view>
        <view class="movie-main" v-if="tanIndex == 3">
            <u-sticky offset-top="0">
                <view class="sticky">
                    <view class="slot-wrap">
                        <u-search v-model="keyword" :show-action="showAction" height="56" :clearabled="false"
                            :action-style="{color: '#fff'}" @search="search" @blur="blur" @clear="clear"
                            @change="input"></u-search>

                    </view>
                    <view class="cinema-down">
                        <view class="down-city" @click="$refs.popupRef.show()">
                            <text>{{position.city ? position.city : cityInfo.city}}</text>
                            <image :src="$imgUrl+'images/movie-xiala.png'"></image>
                        </view>
                        <view class="down-city" style="margin-left: 80rpx;" @click="isShow=true">
                            <text>{{area?area:'全城'}}</text>
                            <image :src="$imgUrl+'images/movie-xiala.png'"></image>
                        </view>
                    </view>
                    <u-picker mode="selector" v-model="isShow" :default-selector="[0]" :range="areaList"
                        range-key="areaName" @confirm="changeArea"></u-picker>
                </view>
            </u-sticky>
            <view class="cinema-list" v-for="(value,index) in dataList" :key="index" @click="getDataUrl(value)">
                <view class="cinema-name">{{value.cinemaName}}</view>
                <view class="cinema-address-item">
                    <view class="address-text">{{value.address}}</view>
                    <!-- <view class="distance">{{value.distance}}km</view> -->
                </view>
                <!-- <view class="sessions">近期场次：05/29 10:15 I 05/29 12:15 I 05/29 14:15</view> -->
            </view>
        </view>

        <popup-layer ref="popupRef" :direction="'right'">
            <view style="width:750upx;height: 100%;overflow:auto;">
                <city v-if="cityList.length>0" :cityList="cityList" @back_city="back_city"></city>
            </view>
        </popup-layer>
    </view>
</template>

<script>
    // import {filmList,getCity} from "@/api/film.js"
    import config from "@/utils/config.js"
    const QQMapWX = require('@/utils/tools/qqmap-wx-jssdk.min.js')
    var qqmapsdk = new QQMapWX({
        key: 'XX4BZ-INFW4-PZNU7-KKMEQ-HMEYE-AXBQT'
    });
    import {
        getCityList,
        getMovieList,
        getComingMovieList,
        getCityAreaList,
        getCinemaList,
        getMovieCinemaList
    } from "@/api/movie.js"
    export default {
        data() {
            return {
                tabLists: [{
                        text: '正在热映',
                        type: 1,
                        isLoad: false,
                        list: []
                    },
                    {
                        text: '即将上映',
                        type: 2,
                        isLoad: false,
                        list: []
                    },
                    {
                        text: '影院',
                        type: 3,
                        isLoad: false,
                        list: []
                    }
                ],
                tanIndex: 1,
                rateValue: 3,
                dataList: [
                    // {
                    //     posterUrl: "https://gw.alicdn.com/i1/O1CN01sSmj2b1daSm6IAUcs_!!6000000003752-0-alipicbeacon.jpg_480x480Q30s150.jpg",
                    //     movieName: "长津湖之水门桥",
                    //     grade: "9.6",
                    //     cast: "吴京 易烊千玺 段奕宏 张涵予 朱亚文 李晨 韩东君 耿乐 杜淳",
                    //     director: "徐克",
                    //     duration: 149,
                    //     publishDate: "2022-02-01 08:00:00",
                    //     like: 1155844,
                    //     movieType: "剧情|历史|战争"
                    // },
                    // {
                    //     posterUrl: "https://gw.alicdn.com/i1/O1CN013Ggc2s1Z8HwrwxAfn_!!6000000003149-0-alipicbeacon.jpg_480x480Q30s150.jpg",
                    //     movieName: "奇迹·笨小孩",
                    //     grade: "9.6",
                    //     cast: "易烊千玺 田雨 陈哈琳 齐溪 公磊 许君聪 王宁 黄尧 巩金国",
                    //     director: "文牧野",
                    //     duration: 106,
                    //     publishDate: "2022-02-01 08:00:00",
                    //     like: 686060,
                    //     movieType: "剧情"
                    // },
                ],
                index: 0,
                show: false,
                cityList: [],
                // keyWord: '',
                cityShowList: [],
                isLoad: false,
                cityInfo: {
                    city: '济南',
                    cityId: "837",
                    latitude: 36.66346570550014,
                    longitude: 117.01999869020354
                },
                wellList: [

                ], //所有热映数据
                soonList: [

                ], //所有即将上映数据
                page: 1,
                $imgUrl: this.$imgUrl,
                cityList: [],
                isShow: false,
                selector: [1, 2, 3],
                area: "",
                areaId: "",
                areaList: [],
                keyword: '',
                position: {},
            }
        },
        onLoad() {
            let fun = [
                getCityList(),
                getCityAreaList({
                    city_id: this.cityInfo.cityId
                })
            ]
            Promise.all(fun).then(res => {
                this.cityList = res[0].data
                console.log(this.cityList, "this.cityList")
                this.areaList = [...[{
                    areaId: "",
                    areaName: "全区"
                }], ...res[1].data]
                this.getCity()
            })
        },
        onReachBottom() {
            this.page++
            console.log(this.page, "this.page")
            console.log(this.tanIndex, "this.tanIndex6")
            if (this.tanIndex == 1) {
                this.dataList = this.dataList.concat(config.pageDataFn(this.page, 8, this.wellList))
            } else {
                this.dataList = this.dataList.concat(config.pageDataFn(this.page, 8, this.soonList))
            }
        },
        onShow() {

        },
        methods: {
            getList() {
                this.$loading()
                if (this.tanIndex == 1) {
                    getMovieList({
                        city_id: uni.getStorageSync("cityId") ? uni.getStorageSync("cityId") : this.cityInfo
                            .cityId
                    }).then(res => {
                        console.log(res, "resda")
                        if (res.code == 1) {
                            this.dataList = res.data
                        }
                        this.$hideLoading()
                    })
                } else if (this.tanIndex == 2) {
                    getComingMovieList({
                        city_id: uni.getStorageSync("cityId") ? uni.getStorageSync("cityId") : this.cityInfo
                            .cityId
                    }).then(res => {
                        console.log(res, "resda")
                        if (res.code == 1) {
                            this.dataList = res.data
                        }
                        this.$hideLoading()
                    })
                } else if (this.tanIndex == 3) {
                    let params = {
                        city_id: uni.getStorageSync("cityId") ? uni.getStorageSync("cityId") : this.cityInfo.cityId,
                        lng: uni.getStorageSync('longitude') ? uni.getStorageSync('longitude') : this.cityInfo
                            .longitude,
                        lat: uni.getStorageSync('latitude') ? uni.getStorageSync('latitude') : this.cityInfo
                            .latitude,
                        region_name: this.area,
                        cinema_name: this.keyword,
                    }
                    getCinemaList(params).then(res => {
                        console.log(res, "resda")
                        if (res.code == 1) {
                            this.dataList = res.data
                            console.log(this.dataList, "this.dataList")
                        }
                        this.$hideLoading()
                    })
                }
                // let fun = this.tanIndex == 1 ? getMovieList : getComingMovieList
                // fun({
                //     city_id: uni.getStorageSync("cityId")
                // }).then(res => {
                //     console.log(res, "resda")
                //     if (res.code == 1) {
                //         this.dataList = res.data
                //         console.log(this.dataList, "this.dataList")
                //     }
                //     this.$hideLoading()
                // })
            },
            getCity() {
                uni.getLocation({
                    type: 'wgs84',
                    geocode: true,
                    success: (res) => {
                        console.log(res, "res123")
                        uni.setStorageSync('latitude', res.latitude);
                        uni.setStorageSync('longitude', res.longitude);
                        this.getCityNmae(res.latitude, res.longitude)
                    },
                });
                this.getList()
            },
            getCityNmae(latitude, longitude) {
                qqmapsdk.reverseGeocoder({
                    location: {
                        latitude,
                        longitude
                    },
                    success: (res) => {
                        this.cityInfo.city = res.result.address_component.city
                        let cityId = this.cityList.find(item => item.regionName.includes(res.result
                            .address_component.city.slice(0, 2))).cityId
                        this.cityInfo.cityId = cityId
                        uni.setStorageSync('cityId', cityId);
                        let citName = this.cityList.find(item => item.cityId == cityId).regionName
                        uni.setStorageSync('citName', citName);
                    },
                    fail(res) {
                        console.log(res, '报错了')
                    },
                })
            },
            getShow() {
                this.$refs.popupRef.show();
            },
            back_city(e) {
                console.log(e, "eeeee")
                if (e) {
                    if (e.regionName) {
                        this.$set(this.cityInfo, "city", e.regionName)
                        this.cityInfo.cityId = e.cityId
                        this.$set(this.position, "city", e.regionName)
                        this.position.cityId = e.cityId
                        uni.setStorageSync('cityId', e.cityId);
                        let citName = this.cityList.find(item => item.cityId == e.cityId).regionName
                        uni.setStorageSync('citName', citName);
                    } else {
                        this.$set(this.cityInfo, "city", e)
                        let cityId = this.cityList.find(item => item.regionName == e).cityId
                        uni.setStorageSync('cityId', cityId);
                        this.$set(this.position, "city", e)
                        let a = e.slice(0, 2)
                        console.log(a, "aaaaaaaa")
                        this.position.cityId = this.cityList.find(item => item.regionName == e.slice(0, 2)).cityId
                    }
                }
                this.$refs.popupRef.close();
                this.area = ''
                this.areaId = ''
                this.getAreaList()
                this.getList()
            },
            getAreaList() {
                getCityAreaList({
                    city_id: this.position.cityId
                }).then(res => {
                    this.areaList = [...[{
                        areaId: "",
                        areaName: "全区"
                    }], ...res.data]
                })
            },
            //跳转到电影院列表
            getUrl(data) {
                if (this.cityInfo.city == '定位中') {
                    this.$toast("请选择位置信息")
                    return false
                }
                let info = {
                    position: this.cityInfo,
                    info: data
                }
                console.log(info, "info6")
                uni.navigateTo({
                    url: '/pagesB/movie/cinema-list',
                    success: function(res) {
                        // 通过eventChannel向被打开页面传送数据
                        res.eventChannel.emit('filmDataFromOpene', {
                            data: info
                        })
                    }
                })
            },
            gettab(type, index) {
                this.index = index
                if (this.tanIndex != type) {
                    this.tanIndex = type
                }
                this.getList()
            },
            getMy() {
                uni.redirectTo({
                    url: '/pages/movie/moive-my'
                })
            },
            changeArea(e) {
                console.log(e, "e1")
                console.log(e[0], "eeee")
                this.areaId = this.areaList[e[0]].areaId
                this.area = this.areaList[e[0]].areaName
                this.getList()
                // getMovieCinemaList({
                //     movie_id: '',
                //     city_id: this.cityInfo.cityId,
                //     area: this.area == "全区" ? "" : this.area,
                // }).then(res => {
                //     console.log(res, "res456")
                //     this.dataList = res.data.list
                //     console.log(this.dataList, "this.dataList")
                // })
            },
            getDataUrl(data) {
                uni.navigateTo({
                    url: '/pagesB/movie/choice-movie?item=' + encodeURIComponent(JSON.stringify(data))
                })
            },
            search(e) {
                console.log(e, "搜素")
                // uni.showToast({
                //     title: '搜索：' + res.value,
                //     icon: 'none'
                // })
            },
            input(res) {
                // console.log('----input:', res)
            },
            clear(res) {
                this.keyword = ''
                this.getList()
                // this.$refs.paging.reload();
            },
            blur(res) {
                this.keyword = res
                console.log(this.keyword, 'sousuo1')
                this.getList()
                // this.$refs.paging.reload();
            },
        }
    }
</script>

<style lang="less">
    page {
        background-color: #f4f5f7;
        padding-bottom: 120rpx;
    }

    .movie-top {
        display: flex;
        align-items: center;
        position: fixed;
        // #ifdef  H5
        top: 88rpx;
        // #endif
        // #ifdef  MP-WEIXIN
        top: 0;
        // #endif
        left: 0;
        right: 0;
        background-color: #ffffff;
        padding: 30rpx 32rpx;
        z-index: 9999;
    }

    .top-region {
        display: flex;
        align-items: center;

        text {
            color: #636775;
            font-size: 28rpx;
        }

        image {
            width: 24rpx;
            height: 24rpx;
            margin-left: 8rpx;
        }
    }

    .top-tab-list {
        margin-left: 90rpx;
        display: flex;
        align-items: center;

        .tab-list-items {
            color: #636775;
            font-size: 28rpx;
            padding: 0rpx 25rpx;
            position: relative;
        }

        .sel-item {
            color: #fe602b !important;
            font-size: 32rpx !important;
            font-weight: 600;
        }

        .cut-img {
            width: 52rpx;
            height: 8rpx;
            position: absolute;
            bottom: -30rpx;
            right: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fe602b;
        }
    }

    .sechut {
        margin-left: auto;
        width: 44rpx;
        height: 44rpx;
    }

    .movie-main {
        margin-top: 130rpx;
    }

    .movie-list {
        margin: 20rpx 25rpx 0rpx 25rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        padding: 28rpx 32rpx;
        display: flex;
        align-items: center;

        .movie-img {
            width: 180rpx;
            height: 248rpx;

            image {
                width: 180rpx;
                height: 248rpx;
                border-radius: 20rpx;
            }
        }

        .movie-info {
            margin-left: 24rpx;
            width: 50%;

            .mo-info-top {
                display: flex;
                align-items: center;

                .tiel {
                    color: #2d3039;
                    font-size: 32rpx;
                    font-weight: 600;
                }

                .movie-d {
                    margin-left: 20rpx;
                    border-radius: 6rpx;
                    border: 1rpx solid #c4c4c4;
                    color: #a6a8ae;
                    font-size: 17rpx;

                    .zimu {
                        padding: 2rpx 6rpx;
                    }

                    .shuzi {
                        background-color: #c4c4c4;
                        padding: 0rpx 6rpx;
                        color: #ffffff;
                    }
                }
            }
        }
    }

    .rate-item {
        display: flex;
        align-items: center;
        margin-top: 16rpx;

        .rate-nun {
            color: #ff6e06;
            font-size: 28rpx;
            font-weight: 550;
            margin-left: 16rpx;
        }
    }

    .director {
        color: #636775;
        font-size: 24rpx;
        margin-top: 16rpx;
    }

    .to-star {
        color: #787a82;
        font-size: 24rpx;
        margin-top: 10rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .calss-item {
        display: flex;
        align-items: center;
        margin-top: 12rpx;

        .classify-item {
            padding: 6rpx 12rpx;
            border-radius: 6rpx;
            border: 2rpx solid #dadce4;
            color: #a6a8ae;
            font-size: 20rpx;
        }

        .time {
            font-size: 24rpx;
            color: #a6a8ae;
            padding-left: 20rpx;
        }
    }

    .movie-btns {
        margin-left: auto;
        width: 110rpx;
        height: 58rpx;
        background: linear-gradient(207deg, #ff9272 0%, #fc5421 100%);
        border-radius: 29rpx;
        text-align: center;
        line-height: 58rpx;
        color: #ffffff;
        font-size: 24rpx;
        font-weight: 550;
    }

    .region-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx 20rpx;

        .region-left {
            width: 75%;
            border-radius: 40rpx;
            height: 68rpx;
            background-color: #f5f6f8;
            display: flex;
            align-items: center;
            padding-left: 30rpx;
        }

        .region-val {
            width: 90%;
            font-size: 30rpx;
        }

        .region-btn {
            background: linear-gradient(207deg, #ff9272 0%, #fc5421 100%);
            border-radius: 50rpx;
            height: 68rpx;
            text-align: center;
            width: 140rpx;
            line-height: 68rpx;
            color: #ffffff;
            font-size: 24rpx;
            font-weight: 550;
        }
    }

    .region-list {
        padding: 22rpx 35rpx;
        color: #2d3039;
        font-size: 32rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2rpx solid #e2e2e2;
    }

    .empty {
        text-align: center;
        padding-top: 30rpx;
        color: #787a82;
        font-size: 24rpx;
    }

    .movie-boom {
        display: flex;
        align-items: center;
        padding-top: 16rpx;
        padding-bottom: 4rpx;
        background-color: #ffffff;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;

        .movie-boom-item {
            width: 50%;
            text-align: center;

            image {
                width: 48rpx;
                height: 48rpx;
            }

            .boom-item-text {
                color: #a2a4aa;
                font-size: 20rpx;
            }
        }
    }

    .slot-wrap {
        padding-top: 30rpx;
        display: flex;
        align-items: center;
        flex: 1;

        u-search {
            width: 90%;
            margin: 0 auto;
        }
    }

    .cinema-down {
        display: flex;
        align-items: center;
        padding: 22rpx 32rpx;
        border-bottom: 2rpx solid #dfe0e2;
        background-color: #fff;

        .down-city {
            display: flex;
            align-items: center;

            text {
                color: #636775;
                font-size: 28rpx;
            }

            image {
                width: 24rpx;
                height: 24rpx;
                margin-left: 8rpx;
            }
        }

        .serchs {
            margin-left: auto;
            width: 44rpx;
            height: 44rpx;
        }
    }

    .cinema-list {
        margin: 0rpx 32rpx;
        border-bottom: 2rpx solid #dfe0e2;
        padding: 32rpx 0rpx 40rpx 30rpx;
        background-color: #fff;

        .cinema-name {
            color: #2d3039;
            font-size: 32rpx;
            font-weight: 550;
        }

        .cinema-address-item {
            display: flex;
            justify-content: space-between;
            margin-top: 10rpx;

            .address-text {
                color: #636775;
                font-size: 24rpx;
                width: 95%;
            }

            .distance {
                color: #636775;
                font-size: 28rpx;
            }
        }
    }
</style>